(function(){
    var myChart = echarts.init(document.getElementById('echartGEO'));
    var option = {
        backgroundColor: '#1b1b1b',
        tooltip : {
            formatter: "{a} <br/>{c} {b}"
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        series : [
            {
                name:'速度',
                type:'gauge',
                min:0,
                max:100,
                splitNumber:10,
                center : ['50%', '50%'],
                radius: '90%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
                        width: 2,
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisLabel: {            // 坐标轴小标记
                    textStyle: {       // 属性lineStyle控制线条样式
                        fontWeight: 'normal',
                        color: '#fff',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length :15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                splitLine: {           // 分隔线
                    length :25,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        width:3,
                        color: '#fff',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                pointer: {           // 分隔线
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 5
                },
                title : {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic',
                        color: '#fff',
                        shadowColor : '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                detail : {
                    //backgroundColor: 'rgba(30,144,255,0.8)',
                    borderWidth: 1,
                    borderColor: '#EEE',
                    shadowColor : '#EEE', //默认透明
                    shadowBlur: 5,
                    offsetCenter: [0, '30%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        color: '#fff'
                    }
                },
                data:[{value: 0, name: 'km/h'}]
            }
        
        ]
    };
    
    // if browser not support navigator.geolocation
    if(typeof navigator.geolocation === 'undefined') return;

    var watchID = navigator.geolocation.watchPosition(successFn,errorFn,{
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
    });
    function successFn(pos){
        var curSpeed = pos.coords.speed;  // m/s
            curSpeed = Math.round(curSpeed * 60 * 60 / 1000); // km/s
           
        option.series[0].data[0].value = curSpeed;
        myChart.setOption(option);
    }
    function errorFn(error){
        switch(error.code){
               case error.TIMEOUT:
                    console.log('超时');
                    break;
               case error.PERMISSION_DENIED:
                    console.log('用户拒绝提供地理位置');
                    break;
               case error.POSITION_UNAVAILABLE:
                    console.log('地理位置不可用');
                    break;
               default:
                    break;
          }
    }
})();
